import QtQuick 2.0

Item {
    id: root
    width: 800
    height: 500
    property int duration: 3000

    //天空界面
    Rectangle{
        id:sky
        width: parent.width
        height: 300
        gradient: Gradient{
            GradientStop{position: 0.0; color: "#0080FF"}
            GradientStop{position: 1.0; color: "#66CCFF"}
        }
    }
    //大地界面
    Rectangle {
        id: ground
        anchors.top: sky.bottom
        anchors.bottom: root.bottom
        width: parent.width
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#00FF00" }
            GradientStop { position: 1.0; color: "#00803F" }
        }
    }
    //加载足球
    Image {
        id: ball
        x:0; y:root.height -height
        source: "assets/soccer_ball.png"
        MouseArea{
            anchors.fill: parent
            onClicked: {
                ball.x = 0;
                ball.y = root.height-ball.height;
                ball.rotation = 0;
                anim.restart()
            }
        }

    }

    //加载动画
    ParallelAnimation
    {
         id:anim
         SequentialAnimation{
            NumberAnimation{
                target: ball
                properties: "y"
                to: 20
                duration: root.duration * 0.4
                easing.type: Easing.OutCirc
            }

            NumberAnimation {
                target: ball
                properties: "y"
                to: root.height-ball.height
                duration: root.duration * 0.6
                easing.type: Easing.OutBounce
            }
         }

         NumberAnimation {
             target: ball
             properties: "x"
             to: root.width-ball.width
             duration: root.duration
 //            easing.type: Easing.OutCirc
         }

         RotationAnimation{
            target: ball
            properties: "rotation"
            to: 1080
            duration: root.duration
         }
    }

}
